<template>
  <menu ref="menu">
    <div class="logo border-right wos-flex">
      <div class="logo-img">
        <img src="../../assets/images/logo.png" alt />
      </div>
      <div class="logo-text" v-show="!collapsed">WOS-CMS</div>
    </div>
    <a-menu
      mode="inline"
      :openKeys="openKeys"
      @openChange="onOpenChange"
      theme="dark"
      :inlineCollapsed="collapsed"
      :style="menuWidthStyle"
    >
      <!--        动态菜单        -->
      <template v-for="(item,index) in menuList">
        <a-menu-item v-if="item.children && item.children.length == 0" :key="index">
          <a-icon :type="item.ico" />
          <span>{{item.title}}</span>
        </a-menu-item>
        <a-sub-menu :key="'sub' + index" v-else>
          <span slot="title">
            <a-icon :type="item.ico" />
            <span>{{item.title}}</span>
          </span>
          <a-menu-item v-for="(itemChild,indexChild) in item.children">
            <router-link :to="item.path + '/'+ itemChild.path" :key="indexChild">{{itemChild.title}}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </template>
      <!-- 插槽 -->
    </a-menu>
  </menu>
</template>

<script>
export default {
  name: "MenuList",
  props: {
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rootSubmenuKeys: [],
      openKeys: []
    };
  },
  computed: {
    // 菜单折叠动态样式
    menuWidthStyle() {
      let result;
      this.collapsed
        ? (result = { width: "auto" })
        : (result = { width: "200px" });
      return result;
    },
    // 菜单列表
    menuList: function() {
      return this.$store.state.MENU_CONFIG;
    }
  },
  methods: {
    // 折叠菜单change事件
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    init() {
      // 菜单下标初始化
      this.menuList.forEach((element, index) => {
        if (element.children.length > 0) {
          this.rootSubmenuKeys.push("sub" + index);
        }
      });
      // 折叠菜单默认展示下标
      this.openKeys.push(this.rootSubmenuKeys[0]);
    }
  },
  mounted() {
    this.init();

    console.log("查看菜单返回值", this.menuList);
  }
};
</script>

<style scoped lang="less">
@import "../../assets/css/rule.less";

menu {
  height: 100vh;
  background-color: @dark-blue;
  text-align: left;
  -moz-box-shadow: 3px 0px 7px @gray;
  -webkit-box-shadow: 3px 0px 7px @gray;
  box-shadow: 3px 0px 7px @gray;
  overflow: hidden;

  .logo {
    height: 80px;
    width: 100%;
    line-height: 80px;

    .logo-img {
      padding-left: 25px;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .logo-text {
      color: #ffffff;
      padding-left: 10px;
    }
  }

  z-index: 100;
}
</style>
